<template>
	<view>
		<block v-if="list.length>0 ">
			<view class="tops"></view>
			<block v-for="(item,index) in list" :key="index">
				<view class="items">
					<view class="itemList">
						<view class="list_top dis dis3 dis2">
							<view class="top_left dis dis2" @click="copy(item.orderno)">
								<text class="top_left_1">订单编号：{{item.orderno}}</text>
								<image src="../../../static/img/copey.png" mode="aspectFit" class="copey"></image>
							</view>
							<view class="top_rigth dis dis2" v-if="item.ispay==1">付款成功</view>
							<view class="top_rigth dis dis2" v-if="item.ispay==0">未支付</view>
						</view>
						<view class="list_conts dis dis3">
							<view class="const_left">
								<view class="lstTop">{{item.title}}</view>
								<view class="lstTop_1">创建时间：{{item.createtime}}</view>
								<view class="lstTop_1 lstTop_2" v-if="item.ispay==1">付款时间：{{item.paytime}}</view>
								<view class="lstTop_1 lstTop_2" v-if="item.ispay==0">付款时间：未支付</view>
							</view>
							<view class="const_rigth">
								<image :src="item.pic" mode="aspectFit" class="const_rigth"></image>
							</view>
						</view>
						<view class="list_bottom dis dis7">
							<view class="lstpo">
								<text>实际支付：</text>
								<text>￥{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
			<view class="kongs"></view>
			<view class="botoms contenr" @click="copy(0)" :class="[isIPX?'isIPXs':'']">
				<text class="botomText1">联系客服 VX：</text>
				<text class="botomText2">{{wx}}</text>
				<image src="../../../static/img/copey.png" mode="aspectFit" class="copey"></image>
			</view>
		</block>
		<block v-if="list.length<=0 && is">
			<ques text1="你还没有订单记录"></ques>

		</block>
	</view>
</template>

<script>
	let app = getApp().globalData;
	import ques from '../../../components/quesheng.vue';
	export default {
		components: {
			ques
		},
		data() {
			return {
				list: [],
				wx: 'Debra___',
				id: 0,
				is: true,
				isIPX: app.isIPX,
				isShow: true,
			};
		},
		methods: {
			copy(orderno) {
				let itemOrderno = this.wx
				if (orderno != 0) {
					itemOrderno = orderno
				}
				uni.setClipboardData({
					data: itemOrderno,
					success: function() {
						uni.getClipboardData({
							success: function(res) {
								console.log(res.data);
							}
						});
					}
				});
			},
			getData(id) {
				let that = this;
				let list = this.list;
				let ids = this.id; //保存的id，
				let picId = 0; //订单id
				this.$http._post('test/userorderlist.do', {
					lastid: id
				}).then(res => {
					console.log(res)
					if (res.data.issuccess == 1) {
						let {
							data
						} = res.data;
						if (data.length <= 0) {
							that.is = true;
							that.isShow = false;
							return
						}
						for (let i = 0; i < data.length; i++) {
							if (i + 1 == data.length) {
								picId = data[i].id;
							}
						}
						if (ids == picId) {
							that.is = false;
							return
						}
						that.id = picId;
						if (list.length <= 0) {
							that.list = data;
						} else {
							list.push.apply(list, data);
							that.list = list;
						}
					}
					// console.log(res)
				})
			}
		},
		onLoad() {
			this.getData(0)
		},
		onReachBottom() {
			let id = this.id;
			let is = this.is;
			if (!is) {
				this.$http.isMssage('暂无更多数据');
				return
			}
			this.getData(id);
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../common/css/flex.css";
	@import "../../../common/css/index.scss";

	.tops {
		width: 100%;
		height: 51upx;
	}

	.items {
		width: 686upx;
		height: 355upx;
		background: #FFFFFF;
		border-radius: 24upx;
		margin: auto;
		margin-bottom: 32upx;

		.itemList {
			width: 622upx;
			height: 100%;
			margin: auto;

			.list_top {
				width: 100%;
				height: 77upx;
				border-bottom: 1px solid #eaeaea;

				.top_left {
					height: 100%;
					width: 70%;
					font-size: 28upx;
					font-family: $typeface1;
					font-weight: 400;
					color: #666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					.top_left_1 {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.copey {
						width: 38upx;
						height: 38upx;
						margin-left: 11upx;
					}

					// border: 1px solid red;
				}

				.top_rigth {
					height: 100%;
					font-size: 28upx;
					font-family: $typeface1;
					font-weight: 400;
					color: #E85335;
				}
			}

			.list_conts {
				width: 100%;
				height: 148upx;
				margin-top: 28upx;

				.const_left {
					// width: 414upx;
					height: 100%;

					.lstTop {
						height: 45upx;
						font-size: 32upx;
						font-family: $typeface;
						font-weight: 500;
						color: #333333;
					}

					.lstTop_1 {
						height: 33upx;
						font-size: 24upx;
						font-family: $typeface1;
						font-weight: 400;
						color: #C1C1C1;
						margin-top: 20upx;
					}

					.lstTop_2 {
						margin-top: 4upx;
					}
				}

				.const_rigth {
					width: 148upx;
					height: 148upx;
				}
			}

			.list_bottom {
				width: 100%;
				height: 40upx;
				font-size: 28upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333333;
				margin-top: 24upx;

				.lstpo {
					height: 100%;
				}
			}
		}
	}

	.kongs {
		width: 100%;
		height: 130upx;
	}

	.botoms {
		width: 100%;
		height: 128upx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;

		.botomText1 {
			font-size: 28upx;
			font-family: $typeface1;
			font-weight: 400;
			color: #999999;
		}

		.botomText2 {
			font-size: 28upx;
			font-family: $typeface;
			font-weight: 500;
			color: #333333;
		}

		.copey {
			width: 38upx;
			height: 38upx;
			margin-left: 11upx;
		}
	}

	.isIPXs {
		padding-bottom: 68upx;
	}


</style>
